// # custom-forms -  The scss file which defines the common scss attribute

// # THIS FILE IS PART OF BOOTSTRAP PROJECT.IT IS RELEASED AND IS LICENSED UNDER MIT. https://github.com/twbs/bootstrap/tree/v4.1.3/scss/_custom-forms.scss

// # Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

// # Copyright (c) 2011-2022 The Bootstrap Authors


.custom-control {
  position: relative;
  display: block;
  min-height: ($f-font-size-base * $f-line-height-base);
  padding-left: $f-custom-control-gutter;
}

.custom-control-inline {
  display: inline-flex;
  margin-right: $f-custom-control-spacer-x;
}

.custom-control-input {
  position: absolute;
  z-index: -1;
  opacity: 0;

  &:checked~.custom-control-label::before {
    color: $f-custom-control-indicator-checked-color;
    @include f-background-has-gradient($f-custom-control-indicator-checked-bg);
    @include f-has-box-shadow($f-custom-control-indicator-checked-box-shadow);
  }

  &:focus~.custom-control-label::before {
    box-shadow: $f-custom-control-indicator-focus-box-shadow;
    color: $f-custom-control-indicator-checked-color;
  }

  &:active~.custom-control-label::before {
    color: $f-custom-control-indicator-active-color;
    background-color: $f-custom-control-indicator-active-bg;
    @include f-has-box-shadow($f-custom-control-indicator-active-box-shadow);
  }

  &:disabled {
    ~.custom-control-label {
      color: $f-custom-control-label-disabled-color;

      &::before {
        background-color: $f-custom-control-indicator-disabled-bg;
      }
    }
  }
}

.custom-control-label {
  position: relative;
  margin-bottom: 0;

  &::before {
    position: absolute;
    top: (($f-font-size-base * $f-line-height-base - $f-custom-control-indicator-size) / 2);
    left: -$f-custom-control-gutter;
    display: block;
    width: $f-custom-control-indicator-size;
    height: $f-custom-control-indicator-size;
    pointer-events: none;
    content: "";
    user-select: none;
    background-color: $f-custom-control-indicator-bg;
    @include f-has-box-shadow($f-custom-control-indicator-box-shadow);
  }

  &::after {
    position: absolute;
    top: (($f-font-size-base * $f-line-height-base - $f-custom-control-indicator-size) / 2);
    left: -$f-custom-control-gutter;
    display: block;
    width: $f-custom-control-indicator-size;
    height: $f-custom-control-indicator-size;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: $f-custom-control-indicator-bg-size;
  }
}

.custom-checkbox {
  .custom-control-label::before {
    @include f-custom-border-radius($f-custom-checkbox-indicator-border-radius);
  }

  .custom-control-input:checked~.custom-control-label {
    &::before {
      @include f-background-has-gradient($f-custom-control-indicator-checked-bg);
    }

    &::after {
      background-image: $f-custom-checkbox-indicator-icon-checked;
    }
  }

  .custom-control-input:indeterminate~.custom-control-label {
    &::before {
      @include f-has-box-shadow($f-custom-checkbox-indicator-indeterminate-box-shadow);
    }

    &::after {
      background-image: $f-custom-checkbox-indicator-icon-indeterminate;
    }
  }

  .custom-control-input:disabled {
    &:checked~.custom-control-label::before {
      background-color: $f-custom-control-indicator-checked-disabled-bg;
    }

    &:indeterminate~.custom-control-label::before {
      background-color: $f-custom-control-indicator-checked-disabled-bg;
    }
  }
}


.custom-radio {
  .custom-control-label::before {
    border-radius: $f-custom-radio-indicator-border-radius;
  }

  .custom-control-input:checked~.custom-control-label {
    &::before {
      @include f-background-has-gradient($f-custom-control-indicator-checked-bg);
    }

    &::after {
      background-image: $f-custom-radio-indicator-icon-checked;
    }
  }

  .custom-control-input:disabled {
    &:checked~.custom-control-label::before {
      background-color: $f-custom-control-indicator-checked-disabled-bg;
    }
  }
}


.custom-select {
  display: inline-block;
  width: 100%;
  height: $f-custom-select-height;
  padding: $f-custom-select-padding-y (
    $f-custom-select-padding-x + $f-custom-select-indicator-padding) $f-custom-select-padding-y $f-custom-select-padding-x;
  line-height: $f-custom-select-line-height;
  color: $f-custom-select-color;
  vertical-align: middle;
  background: $f-custom-select-bg $f-custom-select-indicator no-repeat right $f-custom-select-padding-x center;
  background-size: $f-custom-select-bg-size;
  border: $f-custom-select-border-width solid $f-custom-select-border-color;

  @if $f-has-radius {
    border-radius: $f-custom-select-border-radius;
  }

  @else {
    border-radius: 0;
  }

  @include f-has-box-shadow($f-custom-select-box-shadow
);
appearance: none;

&:focus {
  border-color: $f-custom-select-focus-border-color;
  outline: 0;

  @if $f-has-shadows {
    box-shadow: $f-custom-select-box-shadow, $f-custom-select-focus-box-shadow;
  }

  @else {
    box-shadow: $f-custom-select-focus-box-shadow;
  }

  &::-ms-value {
    color: $f-input-color;
    background-color: $f-input-bg;
  }
}

&[multiple],
&[size]:not([size="1"]) {
  height: auto;
  padding-right: $f-custom-select-padding-x;
  background-image: none;
}

&:disabled {
  color: $f-custom-select-disabled-color;
  background-color: $f-custom-select-disabled-bg;
}

&::-ms-expand {
  opacity: 0;
}
}

.custom-select-sm {
  height: $f-custom-select-height-sm;
  padding-top: $f-custom-select-padding-y;
  padding-bottom: $f-custom-select-padding-y;
  font-size: $f-custom-select-font-size-sm;
}

.custom-select-lg {
  height: $f-custom-select-height-lg;
  padding-top: $f-custom-select-padding-y;
  padding-bottom: $f-custom-select-padding-y;
  font-size: $f-custom-select-font-size-lg;
}

.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: $f-custom-file-height;
  margin-bottom: 0;
}

.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: $f-custom-file-height;
  margin: 0;
  opacity: 0;

  &:focus~.custom-file-label {
    border-color: $f-custom-file-focus-border-color;
    box-shadow: $f-custom-file-focus-box-shadow;

    &::after {
      border-color: $f-custom-file-focus-border-color;
    }
  }

  &:disabled~.custom-file-label {
    background-color: $f-custom-file-disabled-bg;
  }

  @each $f-lang,
  $f-value in $f-custom-file-text {
    &:lang(#{$f-lang})~.custom-file-label::after {
      content: $f-value;
    }
  }
}

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: $f-custom-file-height;
  padding: $f-custom-file-padding-y $f-custom-file-padding-x;
  line-height: $f-custom-file-line-height;
  color: $f-custom-file-color;
  background-color: $f-custom-file-bg;
  border: $f-custom-file-border-width solid $f-custom-file-border-color;
  @include f-custom-border-radius($f-custom-file-border-radius);
  @include f-has-box-shadow($f-custom-file-box-shadow);

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: $f-custom-file-height-inner;
    padding: $f-custom-file-padding-y $f-custom-file-padding-x;
    line-height: $f-custom-file-line-height;
    color: $f-custom-file-button-color;
    content: "Browse";
    @include f-background-has-gradient($f-custom-file-button-bg);
    border-left: $f-custom-file-border-width solid $f-custom-file-border-color;
    @include f-custom-border-radius(0 $f-custom-file-border-radius $f-custom-file-border-radius 0);
  }
}



.custom-range {
  width: 100%;
  padding-left: 0;
  background-color: transparent;
  appearance: none;

  &:focus {
    outline: none;

    &::-webkit-slider-thumb {
      box-shadow: $f-custom-range-thumb-focus-box-shadow;
    }

    &::-moz-range-thumb {
      box-shadow: $f-custom-range-thumb-focus-box-shadow;
    }

    &::-ms-thumb {
      box-shadow: $f-custom-range-thumb-focus-box-shadow;
    }
  }

  &::-moz-focus-outer {
    border: 0;
  }

  &::-webkit-slider-thumb {
    width: $f-custom-range-thumb-width;
    height: $f-custom-range-thumb-height;
    margin-top: (($f-custom-range-track-height - $f-custom-range-thumb-height) / 2); // Webkit specific
    @include f-background-has-gradient($f-custom-range-thumb-bg);
    border: $f-custom-range-thumb-border;
    @include f-custom-border-radius($f-custom-range-thumb-border-radius);
    @include f-has-box-shadow($f-custom-range-thumb-box-shadow);
    @include f-transition($f-custom-forms-transition);
    appearance: none;

    &:active {
      @include f-background-has-gradient($f-custom-range-thumb-active-bg);
    }
  }

  &::-webkit-slider-runnable-track {
    width: $f-custom-range-track-width;
    height: $f-custom-range-track-height;
    color: transparent;
    cursor: $f-custom-range-track-cursor;
    background-color: $f-custom-range-track-bg;
    border-color: transparent;
    @include f-custom-border-radius($f-custom-range-track-border-radius);
    @include f-has-box-shadow($f-custom-range-track-box-shadow);
  }

  &::-moz-range-thumb {
    width: $f-custom-range-thumb-width;
    height: $f-custom-range-thumb-height;
    @include f-background-has-gradient($f-custom-range-thumb-bg);
    border: $f-custom-range-thumb-border;
    @include f-custom-border-radius($f-custom-range-thumb-border-radius);
    @include f-has-box-shadow($f-custom-range-thumb-box-shadow);
    @include f-transition($f-custom-forms-transition);
    appearance: none;

    &:active {
      @include f-background-has-gradient($f-custom-range-thumb-active-bg);
    }
  }

  &::-moz-range-track {
    width: $f-custom-range-track-width;
    height: $f-custom-range-track-height;
    color: transparent;
    cursor: $f-custom-range-track-cursor;
    background-color: $f-custom-range-track-bg;
    border-color: transparent;
    @include f-custom-border-radius($f-custom-range-track-border-radius);
    @include f-has-box-shadow($f-custom-range-track-box-shadow);
  }

  &::-ms-thumb {
    width: $f-custom-range-thumb-width;
    height: $f-custom-range-thumb-height;
    margin-top: 0;
    margin-right: $f-custom-range-thumb-focus-box-shadow-width;
    margin-left: $f-custom-range-thumb-focus-box-shadow-width;
    @include f-background-has-gradient($f-custom-range-thumb-bg);
    border: $f-custom-range-thumb-border;
    @include f-custom-border-radius($f-custom-range-thumb-border-radius);
    @include f-has-box-shadow($f-custom-range-thumb-box-shadow);
    @include f-transition($f-custom-forms-transition);
    appearance: none;

    &:active {
      @include f-background-has-gradient($f-custom-range-thumb-active-bg);
    }
  }

  &::-ms-track {
    width: $f-custom-range-track-width;
    height: $f-custom-range-track-height;
    color: transparent;
    cursor: $f-custom-range-track-cursor;
    background-color: transparent;
    border-color: transparent;
    border-width: ($f-custom-range-thumb-height * .5);
    @include f-has-box-shadow($f-custom-range-track-box-shadow);
  }

  &::-ms-fill-lower {
    background-color: $f-custom-range-track-bg;
    @include f-custom-border-radius($f-custom-range-track-border-radius);
  }

  &::-ms-fill-upper {
    margin-right: 0.9375rem;
    background-color: $f-custom-range-track-bg;
    @include f-custom-border-radius($f-custom-range-track-border-radius);
  }
}

.custom-control-label::before,
.custom-file-label,
.custom-select {
  @include f-transition($f-custom-forms-transition);
}